import classNames from 'classnames';
import './index.scss';
import { useMemo, useState } from 'react';
import { billTypeToName } from '@/contants/index';
import { Icon } from '@/components';

const DailyBill = ({ date, billList }) => {
  const totalMoney = useMemo(() => {
    const pay = billList.filter((x) => x.type === 'pay').reduce((a, c) => a + c.money, 0);
    const inCome = billList.filter((x) => x.type === 'income').reduce((a, c) => a + c.money, 0);
    return {
      pay,
      inCome,
      total: inCome + pay,
    };
  }, [billList]);

  const [visible, updteVisible] = useState(false);

  return (
    <div className={classNames('dailyBill')}>
      <div className="header">
        <div className="dateIcon">
          <span className="date">{date}</span>
          <span
            className={classNames('arrow', visible && 'expand')}
            onClick={() => updteVisible(!visible)}
          ></span>
        </div>
        <div className="oneLineOverview">
          <div className="pay">
            <span className="type">支出</span>
            <span className="money">{totalMoney.pay}</span>
          </div>
          <div className="income">
            <span className="type">收入</span>
            <span className="money">{totalMoney.inCome}</span>
          </div>
          <div className="balance">
            <span className="money">{totalMoney.total}</span>
            <span className="type">结余</span>
          </div>
        </div>
      </div>{' '}
      {/* 单日列表 */}
      <div className="billList">
        {visible
          ? billList.map((item) => {
              return (
                <div className="bill" key={item.id}>
                  <Icon type={item.useFor} />
                  <div className="detail">
                    <div className="billType">{billTypeToName[item.useFor]}</div>
                  </div>
                  <div className={classNames('money', item.type)}>{item.money.toFixed(2)}</div>
                </div>
              );
            })
          : ''}
      </div>
    </div>
  );
};
export default DailyBill;
